<template>
  <div class="answer-question">
    <div class="page-header">
      <div class="header-top">
        <button class="back-btn" @click="goToLevelList">← 返回关卡列表</button>
        <h1>环保知识问答</h1>
      </div>
    </div>
    
    <div class="question-container">
      <div class="question-card">
        <!-- 答题进度显示 -->
        <div class="progress-container">
          <div class="progress-info">
            <span class="progress-text">第 {{ currentQuestionIndex }} 题</span>
            <span class="progress-separator">/</span>
            <span class="progress-text">共 {{ totalQuestions }} 题</span>
          </div>
          <div class="progress-bar">
            <div 
              class="progress-fill" 
              :style="{ width: (currentQuestionIndex / totalQuestions) * 100 + '%' }"
            ></div>
          </div>
        </div>
        
        <h2 class="question-text">
          <span v-if="loading">🔄 加载中...</span>
          <span v-else>{{ question.content }}</span>
        </h2>
        
        <div class="options">
          <div 
            v-for="option in options" 
            :key="option.option_id"
            class="option" 
            :class="{ 
              selected: selectedOptionId === option.option_id,
              disabled: showResult
            }" 
            @click="selectOption(option.option_id)"
          >
            <input 
              type="radio" 
              :id="`option-${option.option_id}`" 
              name="answer" 
              :value="option.option_id" 
              :checked="selectedOptionId === option.option_id"
              :disabled="showResult"
            >
            <label :for="`option-${option.option_id}`">{{ getOptionLabel(option.option_id) }}. {{ option.content }}</label>
          </div>
        </div>
        
        <div class="question-actions">
          <button 
            class="submit-btn" 
            @click="submitAnswer" 
            :disabled="selectedOptionId === null || showResult || loading"
          >
            <span v-if="loading">提交中...</span>
            <span v-else>{{ showResult ? '已提交' : '提交答案' }}</span>
          </button>
        </div>
        
        <!-- 答案结果显示 -->
        <div v-if="showResult && !isQuizCompleted" class="result-section" :class="{ 'fade-in': showResult }">
          <div class="result-status" :class="isCorrect ? 'correct' : 'incorrect'">
            <div class="result-icon" :class="isCorrect ? 'correct' : 'incorrect'">{{ isCorrect ? '✓' : '✗' }}</div>
            <div class="result-text">
              <h3>{{ isCorrect ? '回答正确！' : '回答错误' }}</h3>
              <p v-if="isCorrect" class="correct-feedback">太棒了！你掌握了这个环保知识。</p>
              <p v-else class="incorrect-feedback">别灰心，继续学习，下次一定能答对！</p>
            </div>
          </div>
          
          <div v-if="!isCorrect" class="correct-answer">
            <h4>正确答案</h4>
            <div class="correct-answer-content">
              <span class="option-label">{{ correctOptionLabel }}.</span>
              <span class="option-text">{{ correctOptionContent }}</span>
            </div>
          </div>
          
          <div class="result-stats" v-if="answerStats">
            <div class="stat-item">
              <span class="stat-label">答题正确率</span>
              <span class="stat-value">{{ answerStats.correctRate }}%</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">已答题目</span>
              <span class="stat-value">{{ answerStats.totalAnswered }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">当前积分</span>
              <span class="stat-value">{{ answerStats.score }}</span>
            </div>
          </div>
          
          <button class="new-question-btn" @click="loadNewQuestion" :class="{ 'pulse': !answerStats || answerStats.totalAnswered % 5 === 0 }">
            {{ !answerStats || answerStats.totalAnswered >= 9 ? '查看结果' : (answerStats.totalAnswered % 5 === 0 ? '继续挑战' : '下一题') }}
          </button>
        </div>
        
        <!-- 答题完成统计区域 -->
        <div v-if="isQuizCompleted" class="quiz-completion-section" :class="completedAnimationClass">
          <div class="completion-header">
            <h2>🎉 答题完成！</h2>
            <p class="completion-subtitle">恭喜你完成了所有题目，以下是你的成绩统计</p>
          </div>
          
          <div class="completion-stats">
            <div class="stat-card">
              <div class="stat-icon accuracy">📊</div>
              <div class="stat-content">
                <div class="stat-label">正确率</div>
                <div class="stat-value large">{{ answerStats?.correctRate || 0 }}%</div>
                <div class="stat-description">{{ answerStats ? getAccuracyLevel(answerStats.correctRate) : '' }}</div>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon score">🏆</div>
              <div class="stat-content">
                <div class="stat-label">获得积分</div>
                <div class="stat-value large">{{ answerStats?.score || 0 }}</div>
                <div class="stat-description">{{ answerStats ? getScoreLevel(answerStats.score) : '' }}</div>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon correct">✅</div>
              <div class="stat-content">
                <div class="stat-label">正确题数</div>
                <div class="stat-value large">{{ answerStats?.correctCount || 0 }}/{{ answerStats?.totalAnswered || 0 }}</div>
                <div class="stat-description">共{{ answerStats?.totalAnswered || 0 }}题</div>
              </div>
            </div>
          </div>
          
          <div class="completion-actions">
            <button class="restart-btn pulse" @click="restartQuiz">
              重新开始
            </button>
          </div>
        </div>

      </div>
    </div>
    
    <!-- 答题完成统计区域 -->
    <div v-if="isQuizCompleted" :class="['quiz-completion-section', completedAnimationClass]">
      <div class="completion-header">
        <h2>🎉 答题完成!</h2>
        <p class="completion-subtitle">{{ getAccuracyLevel(answerStats?.correctRate || 0) }}</p>
      </div>
      
      <div class="completion-stats">
        <!-- 正确率卡片 -->
        <div class="stat-card">
          <div class="stat-icon">
            {{ answerStats?.correctRate || 0 }}%
          </div>
          <div class="stat-content">
            <h3 class="stat-value large">{{ answerStats?.correctRate || 0 }}%</h3>
            <p class="stat-description">正确率</p>
          </div>
        </div>
        
        <!-- 获得积分卡片 -->
        <div class="stat-card">
          <div class="stat-icon">
            🏆
          </div>
          <div class="stat-content">
            <h3 class="stat-value large">{{ answerStats?.score || 0 }}</h3>
            <p class="stat-description">获得积分</p>
          </div>
        </div>
        
        <!-- 正确题数卡片 -->
        <div class="stat-card">
          <div class="stat-icon">
            ✅
          </div>
          <div class="stat-content">
            <h3 class="stat-value large">{{ answerStats?.correctCount || 0 }}/{{ answerStats?.totalAnswered || 0 }}</h3>
            <p class="stat-description">正确题数</p>
          </div>
        </div>
      </div>
      
      <div class="completion-actions">
        <button class="restart-btn pulse" @click="restartQuiz">
          重新开始答题
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getRandomQuestion, submitAnswer as submitAnswerAPI } from '../api/challenge'

// 路由
const router = useRouter()

// 数据类型定义
interface Question {
  question_id: number
  content: string
  correct_option_index: number
}

interface QuestionOption {
  option_id: number
  content: string
}

// 状态管理
const question = ref<Question>({ question_id: 0, content: '', correct_option_index: 1 })
const options = ref<QuestionOption[]>([])
const selectedOptionId = ref<number | null>(null)
const showResult = ref(false)
const isCorrect = ref(false)
const correctOptionLabel = ref('')
const correctOptionContent = ref('')
const loading = ref(false)
const answerStats = ref<{ totalAnswered: number; correctCount: number; correctRate: number; score: number } | null>(null)
const currentQuestionIndex = ref(1)
const totalQuestions = ref(10) // 假设总共有10道题目，实际可以从API获取
const isQuizCompleted = ref(false)
const completedAnimationClass = ref('')

// 初始化答题统计
const initAnswerStats = () => {
  // 从localStorage获取统计数据或初始化
  const savedStats = localStorage.getItem('answerStats')
  if (savedStats) {
    answerStats.value = JSON.parse(savedStats)
  } else {
    answerStats.value = {
      totalAnswered: 0,
      correctCount: 0,
      correctRate: 0,
      score: 0
    }
  }
}

// 计算得分
const calculateScore = (correct: boolean): number => {
  // 正确答题得10分，连续正确可以获得额外奖励
  const baseScore = 10
  const consecutiveBonus = isCorrect.value ? 2 : 0 // 连续正确奖励
  return correct ? (baseScore + consecutiveBonus) : 0
}

// 更新答题统计
const updateAnswerStats = (correct: boolean) => {
  if (answerStats.value) {
    answerStats.value.totalAnswered++
    if (correct) {
      answerStats.value.correctCount++
      const earnedScore = calculateScore(correct)
      answerStats.value.score += earnedScore
    }
    answerStats.value.correctRate = Math.round((answerStats.value.correctCount / answerStats.value.totalAnswered) * 100)
    
    // 保存到localStorage
    localStorage.setItem('answerStats', JSON.stringify(answerStats.value))
  }
}

// 获取选项标签（A、B、C、D）
const getOptionLabel = (optionId: number): string => {
  const index = options.value.findIndex(opt => opt.option_id === optionId)
  return String.fromCharCode(65 + index) // 65是A的ASCII码
}

// 选择选项
const selectOption = (optionId: number) => {
  if (!showResult && !loading.value) {
    selectedOptionId.value = optionId
    // 添加微动画提升交互体验
    const optionElement = document.getElementById(`option-${optionId}`)
    if (optionElement) {
      optionElement.parentElement?.classList.add('selecting')
      setTimeout(() => {
        optionElement.parentElement?.classList.remove('selecting')
      }, 300)
    }
  }
}

// 提交答案
const submitAnswer = async () => {
  if (selectedOptionId.value === null) {
    // 改进提示方式
    const optionsContainer = document.querySelector('.options')
    if (optionsContainer) {
      optionsContainer.classList.add('shake-animation')
      setTimeout(() => {
        optionsContainer.classList.remove('shake-animation')
      }, 500)
    }
    return
  }
  
  loading.value = true
  try {
    const response = await submitAnswerAPI(question.value.question_id, selectedOptionId.value)
    isCorrect.value = response.data.is_correct
    showResult.value = true
    
    // 更新答题统计
    updateAnswerStats(isCorrect.value)
    
    // 显示正确/错误的选项样式
    highlightAnswerOptions()
    
    // 如果回答错误，显示正确答案
    if (!isCorrect.value) {
      const correctOption = options.value[question.value.correct_option_index - 1]
      correctOptionLabel.value = getOptionLabel(correctOption.option_id)
      correctOptionContent.value = correctOption.content
    }
    
    // 添加成功/失败的动画效果
    const resultSection = document.querySelector('.result-section')
    if (resultSection) {
      resultSection.classList.add('fade-in')
      
      // 添加结果出现时的缩放动画
      setTimeout(() => {
        const resultIcon = resultSection.querySelector('.result-icon')
        if (resultIcon) {
          resultIcon.classList.add('animate-scale')
        }
      }, 100)
    }
    
    // 播放成功/失败音效（如果浏览器支持）
    if (isCorrect.value) {
      playSound('success')
    } else {
      playSound('error')
    }
  } catch (error) {
    console.error('提交答案失败:', error)
    // 模拟提交结果作为备用
    simulateSubmitResult()
  } finally {
    loading.value = false
  }
}

// 播放音效
const playSound = (type: 'success' | 'error') => {
  try {
    const audio = new Audio()
    // 根据浏览器兼容性，可以添加实际的音效文件
    audio.volume = 0.3
    if (type === 'success') {
      // 这里可以设置实际的成功音效URL
      // audio.src = '/sounds/success.mp3'
    } else {
      // 这里可以设置实际的错误音效URL
      // audio.src = '/sounds/error.mp3'
    }
    // audio.play().catch(err => console.log('播放音效失败:', err))
  } catch (error) {
    console.log('音效播放功能不可用')
  }
}

// 高亮显示答案选项
const highlightAnswerOptions = () => {
  const selectedOption = options.value.find(opt => opt.option_id === selectedOptionId.value)
  const correctOption = options.value[question.value.correct_option_index - 1]
  
  // 给所有选项添加样式标记
  options.value.forEach(opt => {
    const optionElement = document.getElementById(`option-${opt.option_id}`)
    if (optionElement && optionElement.parentElement) {
      if (opt.option_id === correctOption.option_id) {
        optionElement.parentElement.classList.add('correct')
      } else if (opt.option_id === selectedOption?.option_id && opt.option_id !== correctOption.option_id) {
        optionElement.parentElement.classList.add('incorrect')
      }
    }
  })
}

// 模拟提交结果（备用）
const simulateSubmitResult = () => {
  const selectedOptionIndex = options.value.findIndex(opt => opt.option_id === selectedOptionId.value)
  isCorrect.value = selectedOptionIndex + 1 === question.value.correct_option_index
  showResult.value = true
  
  // 更新答题统计
  updateAnswerStats(isCorrect.value)
  
  // 显示正确/错误的选项样式
  highlightAnswerOptions()
  
  if (!isCorrect.value) {
    const correctOption = options.value[question.value.correct_option_index - 1]
    correctOptionLabel.value = getOptionLabel(correctOption.option_id)
    correctOptionContent.value = correctOption.content
  }
  
  // 添加成功/失败的动画效果
  const resultSection = document.querySelector('.result-section')
  if (resultSection) {
    resultSection.classList.add('fade-in')
    
    // 添加结果出现时的缩放动画
    setTimeout(() => {
      const resultIcon = resultSection.querySelector('.result-icon')
      if (resultIcon) {
        resultIcon.classList.add('animate-scale')
      }
    }, 100)
  }
}

// 检查是否完成所有题目
const checkQuizCompletion = () => {
  // 当回答了10道题目时视为完成
  if (answerStats.value && answerStats.value.totalAnswered >= 10) {
    isQuizCompleted.value = true
    completedAnimationClass.value = 'slide-up'
    // 触发完成动画
    setTimeout(() => {
      completedAnimationClass.value = 'slide-up animated'
    }, 100)
  }
}

// 重新开始答题
const restartQuiz = () => {
  isQuizCompleted.value = false
  currentQuestionIndex.value = 1
  selectedOptionId.value = null
  showResult.value = false
  
  // 重置统计数据
  if (answerStats.value) {
    answerStats.value.totalAnswered = 0
    answerStats.value.correctCount = 0
    answerStats.value.correctRate = 0
    answerStats.value.score = 0
    localStorage.setItem('answerStats', JSON.stringify(answerStats.value))
  }
  
  loadNewQuestion()
}

// 根据正确率获取评价
const getAccuracyLevel = (accuracy: number): string => {
  if (accuracy >= 90) return '太棒了！接近满分！'
  if (accuracy >= 80) return '非常优秀！'
  if (accuracy >= 70) return '表现不错！'
  if (accuracy >= 60) return '及格了，继续努力！'
  return '需要加强练习！'
}

// 根据得分获取评价
const getScoreLevel = (score: number): string => {
  if (score >= 90) return '超级高分！'
  if (score >= 80) return '高分通过！'
  if (score >= 70) return '不错的分数！'
  if (score >= 60) return '刚好及格！'
  return '加油，再接再厉！'
}

// 加载新题目
const loadNewQuestion = async () => {
  // 检查是否完成所有题目
  checkQuizCompletion()
  
  // 如果已完成，不加载新题目
  if (isQuizCompleted.value) {
    return
  }
  
  // 重置所有选项的样式
  options.value.forEach(opt => {
    const optionElement = document.getElementById(`option-${opt.option_id}`)
    if (optionElement && optionElement.parentElement) {
      optionElement.parentElement.classList.remove('correct', 'incorrect')
    }
  })
  
  selectedOptionId.value = null
  showResult.value = false
  isCorrect.value = false
  correctOptionLabel.value = ''
  correctOptionContent.value = ''
  
  // 更新当前题目索引
  currentQuestionIndex.value++
  // 如果超过总题数，重置为1（循环模式）
  if (currentQuestionIndex.value > totalQuestions.value) {
    currentQuestionIndex.value = 1
  }
  
  // 添加页面过渡效果
  const questionCard = document.querySelector('.question-card')
  if (questionCard) {
    questionCard.classList.add('fade-out')
    setTimeout(async () => {
      await fetchQuestion()
      questionCard.classList.remove('fade-out')
      questionCard.classList.add('fade-in')
      setTimeout(() => {
        questionCard.classList.remove('fade-in')
      }, 300)
    }, 200)
  } else {
    await fetchQuestion()
  }
}

// 获取题目数据
const fetchQuestion = async () => {
  loading.value = true
  try {
    const response = await getRandomQuestion()
    question.value = response.data.question
    options.value = response.data.options
  } catch (error) {
    console.error('获取题目失败:', error)
    showMessage('获取题目失败，请重试','error')
    // 使用模拟数据作为备用
    useMockData()
  } finally {
    loading.value = false
  }
}

const showMessage = (message: string, type: 'success' | 'error' = 'success') => {
  const toast = document.createElement('div')
  toast.textContent = message
  const base = 'position:fixed;left:50%;bottom:80px;transform:translateX(-50%);padding:10px 16px;border-radius:10px;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,0.25);z-index:9999;font-size:14px;opacity:0.95;'
  const bg = type === 'success' ? 'background:#2E8B57;' : 'background:#E74C3C;'
  toast.setAttribute('style', base + bg)
  document.body.appendChild(toast)
  setTimeout(() => {
    toast.style.transition = 'opacity 0.3s ease'
    toast.style.opacity = '0'
    setTimeout(() => { toast.remove() }, 300)
  }, 1800)
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 返回关卡列表
const goToLevelList = () => {
  router.push('/level-list')
}

// 使用模拟数据
const useMockData = () => {
  question.value = {
    question_id: 1,
    content: '下列哪种行为最有助于减少碳排放？',
    correct_option_index: 2
  }
  options.value = [
    { option_id: 1, content: '使用一次性餐具' },
    { option_id: 2, content: '选择公共交通工具出行' },
    { option_id: 3, content: '频繁购买新衣物' },
    { option_id: 4, content: '长时间开空调' }
  ]
}

// 组件挂载时获取题目和初始化统计
onMounted(() => {
  initAnswerStats()
  fetchQuestion()
  // 可以从API获取实际总题数
  // 这里使用默认值10
})
</script>

<style scoped>
.answer-question {
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-btn {
  padding: 10px 16px;
  background: #e8f4ff;
  border: 1px solid #91c3ff;
  border-radius: 20px;
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.back-btn:hover {
  background: #bae0ff;
  color: #096dd9;
  transform: translateY(-1px);
}

.back-btn:active {
    transform: translateY(0);
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .header-top {
      flex-direction: column;
      gap: 15px;
      text-align: center;
    }
    
    .back-btn {
      padding: 8px 14px;
      font-size: 13px;
    }
  }
  
  @media (max-width: 480px) {
    .back-btn {
      padding: 6px 12px;
      font-size: 12px;
      border-radius: 16px;
    }
  }

.page-header h1 {
  font-size: 1.6rem;
  margin: 0;
  color: #2c3e50;
  text-align: center;
  flex: 1;
  padding: 0 20px;
}

.back-btn {
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  background-color: #f8f9fa;
  color: #495057;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.back-btn:hover {
  background-color: #e9ecef;
}

.question-container {
  max-width: 800px;
  margin: 0 auto;
}

.question-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 30px;
  box-sizing: border-box;
}

/* 答题进度样式 */
.progress-container {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.progress-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 1.1rem;
  color: #6c757d;
}

.progress-text {
  font-weight: 500;
}

.progress-separator {
  font-size: 1.2rem;
  color: #adb5bd;
}

.progress-bar {
  height: 6px;
  background-color: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #42b983, #359c6d);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.question-text {
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 30px;
  font-size: 1.4rem;
  line-height: 1.5;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
  position: relative;
}

/* 未选择选项时的抖动动画 */
.options.shake-animation {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
}

/* 过渡动画 */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

.fade-out {
  animation: fadeOut 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

.option {  
  padding: 15px 20px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.option:hover:not(.disabled) {
  border-color: #42b983;
  background-color: #f8f9fa;
  transform: translateX(5px);
}

.option.selected {
  border-color: #42b983;
  background-color: #e8f5ee;
  box-shadow: 0 2px 8px rgba(66, 185, 131, 0.3);
}

.option.selecting {
  animation: pulse 0.3s ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.option.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* 显示正确/错误的答案样式 */
.option.correct {
  border-color: #42b983;
  background-color: #e8f5ee;
}

.option.incorrect {
  border-color: #ff6b6b;
  background-color: #fce8e8;
}

.option input {
  margin-right: 15px;
  width: 18px;
  height: 18px;
}

.option label {
  cursor: pointer;
  font-size: 1.1rem;
  color: #495057;
  flex: 1;
}

.option input:checked + label {
  font-weight: bold;
  color: #2c3e50;
}

.option input:checked {
  accent-color: #42b983;
}

.question-actions {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.submit-btn, .new-question-btn {
  padding: 12px 40px;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1.1rem;
  background-color: #42b983;
  color: white;
}

.submit-btn:hover:not(:disabled), .new-question-btn:hover {
  background-color: #359c6d;
  transform: scale(1.05);
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.result-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.result-status {
  margin-bottom: 25px;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  position: relative;
  overflow: hidden;
}

.result-status::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transform: scaleX(0);
  animation: progressBar 1s ease-out forwards;
}

@keyframes progressBar {
  to {
    transform: scaleX(1);
  }
}

.result-status.correct {
  background-color: #e8f5ee;
  color: #42b983;
}

.result-status.correct::before {
  background-color: #42b983;
}

.result-status.incorrect {
  background-color: #fce8e8;
  color: #ff6b6b;
}

.result-status.incorrect::before {
  background-color: #ff6b6b;
}

.result-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(0.5);
  animation: iconAppear 0.5s ease-out forwards;
}

@keyframes iconAppear {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.result-icon.animate-scale {
  animation: scaleEffect 0.5s ease-out;
}

@keyframes scaleEffect {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.result-icon.correct {
  background-color: #42b983;
  color: white;
  box-shadow: 0 4px 15px rgba(66, 185, 131, 0.3);
}

.result-icon.incorrect {
  background-color: #ff6b6b;
  color: white;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.result-text h3 {
  margin: 0 0 8px 0;
  font-size: 1.4rem;
}

.correct-feedback,
.incorrect-feedback {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

.correct-answer {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  text-align: center;
  border: 2px solid #e9ecef;
  transition: all 0.3s;
}

.correct-answer:hover {
  border-color: #42b983;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.correct-answer h4 {
  margin: 0 0 10px 0;
  color: #42b983;
  font-size: 1.2rem;
}

.correct-answer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.1rem;
}

.option-label {
  font-weight: bold;
  color: #42b983;
}

.option-text {
  color: #2c3e50;
}

.result-stats {
  display: flex;
  justify-content: space-around;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  border: 1px solid #e9ecef;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 5px;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #42b983;
}

.new-question-btn.pulse {
  animation: pulseButton 1.5s infinite;
}

@keyframes pulseButton {
  0% {
    box-shadow: 0 0 0 0 rgba(66, 185, 131, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(66, 185, 131, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(66, 185, 131, 0);
  }
}

/* 答题完成统计样式 */
.quiz-completion-section {
  margin-top: 30px;
  padding: 30px;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.quiz-completion-section.slide-up.animated {
  opacity: 1;
  transform: translateY(0);
}

.completion-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e9ecef;
}

.completion-header h2 {
  font-size: 2rem;
  margin: 0 0 10px 0;
  color: #42b983;
}

.completion-subtitle {
  font-size: 1.1rem;
  color: #6c757d;
  margin: 0;
}

.completion-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 12px;
  border: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #42b983;
}

.stat-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.stat-content {
  flex: 1;
}

.stat-value.large {
  font-size: 2rem;
  margin: 5px 0;
}

.stat-description {
  font-size: 0.95rem;
  color: #6c757d;
  margin-top: 5px;
}

.completion-actions {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.restart-btn {
  padding: 15px 50px;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1.2rem;
  background-color: #42b983;
  color: white;
}

.restart-btn:hover {
  background-color: #359c6d;
  transform: scale(1.05);
}

.restart-btn.pulse {
  animation: pulseButton 1.5s infinite;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .answer-question {
    padding: 15px;
  }
  
  .page-header {
    padding: 15px;
  }
  
  .page-header h1 {
    font-size: 1.4rem;
    padding: 0 10px;
  }
  
  .question-card {
    padding: 20px;
  }
  
  .progress-container {
    margin-bottom: 20px;
    padding-bottom: 15px;
  }
  
  .progress-info {
    font-size: 1rem;
  }
  
  .question-text {
    font-size: 1.2rem;
  }
  
  .option {
    padding: 12px 15px;
  }
  
  .option label {
    font-size: 1rem;
  }
  
  .submit-btn, .new-question-btn {
    width: 100%;
    padding: 12px 20px;
  }
  
  .result-stats {
    flex-direction: column;
    gap: 15px;
  }
  
  .completion-stats {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    padding: 20px;
  }
  
  .completion-header h2 {
    font-size: 1.8rem;
  }
  
  .restart-btn {
    width: 100%;
    padding: 15px 30px;
  }
}

@media (max-width: 480px) {
  .header-top {
    flex-direction: column;
    gap: 15px;
  }
  
  .page-header h1 {
    font-size: 1.3rem;
    padding: 0;
  }
  
  .back-btn {
    padding: 8px 15px;
    font-size: 0.9rem;
  }
  
  .question-text {
    font-size: 1.1rem;
  }
  
  .completion-header h2 {
    font-size: 1.6rem;
  }
  
  .completion-subtitle {
    font-size: 1rem;
  }
  
  .stat-value.large {
    font-size: 1.8rem;
  }
}
</style>
